import { BasicMarker } from '../../js/BasicMarker.js';
import { BasicMarkers } from '../../js/BasicMarkers.js';
import { getMarkerIcon } from '../../js/icon.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import { getPeopleInfoMapYardSyrk } from '@gis/lib/api';
import { dialog } from '@gis/lib/components/antd-dialog';

class Marker extends BasicMarker {
  constructor({ map, data }) {
    super({ map, data });
    /* this.type: 这个type主要用于筛选,需要和filter-legend里面的type相对应 */
    this.type = 'syrk';
    super.create();
  }

  getIcon() {
    return getMarkerIcon(this.type);
  }

  getLabel() {
    const label = super.getLabel();
    label.content = `
      <div class="marker_label">
        <p class="marker_label__name">${this.data.yard_name}</p>
        <p class="marker_label__count">人口数：${this.data.peopleCount}</p>
      </div>`;
    return label;
  }
  onClick() {
    dialog({
      content: () => import('@gis/modules/views/reality-people/people-list/index.vue'),
      contentProps: {
        details: this.data,
      },
      dialogProps: {
        title: '小区人口',
        width: 'large',
        height: 'fixed',
        bodyStyle: { padding: 0 },
        footer: null,
      },
    });
  }
}

export default class Syrk extends BasicMarkers {
  constructor({ map }) {
    super();
    this.map = map;
  }

  createMarker(data) {
    return new Marker({ map: this.map, data });
  }

  async getDataAsync() {
    const { area_code } = useUserInfoStore();
    const params = {
      area_code: area_code,
    };
    const data = await handleCommonRes(getPeopleInfoMapYardSyrk, params);
    return data
      .filter((item) => item.longitude && item.latitude)
      .map((item) => Object.assign(item, { lnglat: [item.longitude, item.latitude] }));
  }
}
